<template>
  <div class="form">
    <page-info-title :title="$t('application.form.itemInfo')"></page-info-title>
    <div class="top">
      <div class="group_one1">
        <div class="group_two">
          <div class="group_three">
            <page-input
              :title="$t('application.form.itemName')"
              @message="
                (e) => {
                  form.itemName = e;
                }
              "
              :required="true"
              :placeholder="$t('application.form.enterItemName')"
              :disabled="disabled"
              :history="oldParams.itemName || ''"
            ></page-input>
            <div style="margin-top: 0.64rem">
              <input-title
                :required="true"
                :title="$t('application.form.coupeArticle')"
              ></input-title>
              <file-load
                :disabled="disabled"
                :size="10"
                accept=".doc,.docx"
                :placeholder="$t('application.form.emterCoupeArticle')"
                @message="
                  (e) => {
                    form.coupeArticle = e;
                  }
                "
                :history="oldParams.coupeArticle || ''"
              ></file-load>
            </div>
          </div>
          <div class="group_three">
            <input-title
              :title="$t('application.form.itemLogo')"
              :required="true"
            ></input-title>
            <div class="logo-load">
              <show-load
                :placeholder="$t('application.form.enterItemLogo')"
                accept=".png,.jpeg,.jpg,.pdf"
                :size="15"
                :disabled="disabled"
                @message="
                  (e) => {
                    form.itemLogo = e;
                  }
                "
                :history="oldParams.itemLogo || ''"
              ></show-load>
            </div>
          </div>
        </div>
        <div class="group_two">
          <div class="group_three">
            <div class="demo-description">
              <input-title
                :required="true"
                :title="$t('application.form.itemIntro')"
              ></input-title>
              <file-load
                :disabled="disabled"
                :size="10"
                accept=".doc,.docx"
                :placeholder="$t('application.form.itemIntro')"
                @message="
                  (e) => {
                    form.itemIntro = e;
                  }
                "
                :history="oldParams.coupeArticle || ''"
              ></file-load>
            </div>
          </div>
          <div class="group_three">
            <input-title
              :title="$t('application.form.itemVideo')"
              :required="true"
            ></input-title>
            <div class="video-load">
              <show-load
                types="video"
                :placeholder="$t('application.form.enterItemVideo')"
                accept=".mp4"
                :size="300"
                :disabled="disabled"
                @message="
                  (e) => {
                    form.itemVideo = e;
                  }
                "
                :history="oldParams.itemVideo || ''"
              ></show-load>
            </div>
          </div>
        </div>
      </div>
      <div class="group_one2">
        <input-title
          :title="$t('application.form.itemPoster')"
          :required="true"
        ></input-title>
        <div class="poster-load">
          <show-load
            :placeholder="$t('application.form.enterItemPoster')"
            accept=".png,.jpg,.jpeg,.pdf"
            :size="15"
            :disabled="disabled"
            @message="
              (e) => {
                form.itemPoster = e;
              }
            "
            :history="oldParams.itemPoster || ''"
          ></show-load>
        </div>
      </div>
    </div>
    <div class="bottom">
      <input-title :title="$t('application.form.otherTitle')"></input-title>
      <div class="pdf-upload">
        <div class="pdf">
          <file-load
            accept=".pdf"
            :size="1"
            :placeholder="$t('application.form.o2')"
            :required="true"
            :disabled="disabled"
            @message="
              (e) => {
                form.faithConsent = e;
              }
            "
            :history="oldParams.faithConsent || ''"
            :telplates="
              $i18n.locale === 'zh'
                ? 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/%E8%AF%9A%E4%BF%A1%E6%89%BF%E8%AF%BA%E4%B9%A6.docx'
                : 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/Integrity%20Declaration%20Form.docx'
            "
          ></file-load>
        </div>
        <div class="pdf">
          <file-load
            accept=".pdf"
            :size="1"
            :placeholder="$t('application.form.o3')"
            :disabled="disabled"
            @message="
              (e) => {
                form.bioethicsConsent = e;
              }
            "
            :history="oldParams.bioethicsConsent || ''"
            :telplates="
              $i18n.locale === 'zh'
                ? 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/%E7%94%9F%E7%89%A9%E4%BC%A6%E7%90%86%E6%89%BF%E8%AF%BA%E4%B9%A6.docx'
                : 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/Bioethics%20and%20Biosafety%20Consent%20Conform.docx'
            "
          ></file-load>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageInfoTitle from "./page-info-title.vue";
import pageInput from "./page-input.vue";
import pageInputTextarea from "./page-input-textarea.vue";
import inputTitle from "./input-title.vue";
import fileLoad from "./file-load.vue";
import showLoad from "./show-load.vue";
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    oldParams: {
      type: [Array, Object],
      default: [],
    },
  },
  components: {
    pageInfoTitle,
    pageInput,
    pageInputTextarea,
    inputTitle,
    fileLoad,
    showLoad,
  },
  data() {
    return {
      form: {
        itemName: "", //项目名称
        coupeArticle: "", //科普文章
        itemLogo: "", //项目logo
        itemIntro: "", //项目简介
        itemVideo: "", //项目视频
        itemPoster: "", //项目海报
        schoolConsent: "test", //校方同意书
        bioethicsConsent: "", //生物伦理承诺书
        faithConsent: "", //诚信承诺书
      },
    };
  },

  watch: {
    form: {
      deep: true,
      handler(newVal, oldVal) {
        this.$emit("message", newVal);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  padding: 0.64rem 1.49rem;
  background: rgba(253, 253, 254, 0.25);
  border: 0.05rem solid #ffffff;
  backdrop-filter: blur(10px);
}

.top {
  display: flex;
  align-items: flex-start;

  .group_one1 {
    display: flex;
    flex-direction: column;
    flex: 1;

    .group_two {
      margin-bottom: 0.64rem;
      display: flex;
      align-items: flex-start;
      width: 9.68rem;

      .group_three {
        width: 100%;
        margin-right: 1.47rem;

        .logo-load {
          width: 9.68rem;
          height: 3.31rem;
        }

        .video-load {
          width: 9.68rem;
          height: 5.44rem;
        }
      }
    }
  }

  .group_one2 {
    width: 9.68rem;

    .poster-load {
      width: 9.68rem;
      height: 10.43rem;
    }
  }
}

.bottom {
  .pdf-upload {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    .pdf {
      width: 9.71rem;
      margin-top: 0.11rem;
      margin-right: 1.35rem;
    }

    .pdf:nth-of-type(3n) {
      margin-right: 0 !important;
    }
  }
}
</style>

